<template>
	<div>
    <div class="form">
      <el-form ref="form" :model="form" label-width="100px">        
        <el-form-item label="任务名称">         
          <el-col :span="16">         
          <el-input v-model="form.name" clearable></el-input>        
          </el-col>       
        </el-form-item>        
        <el-form-item label="选择模板">     
          <el-col :span="16">       
          <el-select v-model="selectTemplate" placeholder="请选择模板" @change="jt(selectTemplate)"  value-key="template_id">     
            <el-option :label="item.title" :value="item" v-for="item in moban" :key="item.template_id"></el-option>        
          </el-select>      
            <p>仅限您小说网站内部的链接</p>  
          </el-col> 
        </el-form-item>  
        <div style="margin-left:100px;margin-bottom: 22px;">  
          <div style="background:#eee; padding:10px">  
            <div id="template-msg-editor" class="template-msg-editor"> 
              <div class="template-msg-title">{{selectTemplate.title}}</div>
              <div class="template-msg-meta">2018年5月23日</div>   
              <div class="template-msg-main" @click="cray" id="crayon">   
                <!-- <span class="template-msg-field" data-key="first" :class="selected==0?'colorblack':selected==1?'colorblue':selected==2?'colorred':selected==3?'colorpink':'colorpig'">
                </span> 
                <br>服务类型：<span class="template-msg-field" data-key="keyword1"><i class="el-icon-edit" @click="edit(index)" style="color: red;"></i></span>
                <br>服务内容：<span class="template-msg-field" data-key="keyword2"><i class="el-icon-edit" @click="edit(index)"></i></span>
                <br><span class="template-msg-field" data-key="remark"><i class="el-icon-edit" @click="edit(index)"></i></span> -->
              </div> 
            </div>
          </div> 
        </div> 
        <!-- 弹窗 --> 
        <el-dialog 
        title="配置模板消息" 
        :visible.sync="popupshow" 
        width="30%" 
        :before-close="handleClose"> 
        <input type="text" v-model="message" placeholder="请输入内容" style="float:left"> 
        <div id="example-5" style="float:left;margin-left:10px;"> 
               
          <el-select v-model="selected" placeholder="请选择活动区域"> 
      <el-option label="黑" value="#000000"></el-option> 
      <el-option label="蓝" value="#4169E1"></el-option>  
      <el-option label="红" value="#DC143C"></el-option> 
      <el-option label="紫" value="#800080"></el-option> 
      <el-option label="粉" value="#FF1493"></el-option> 
      </el-select>      
        </div> 
        <span slot="footer" class="dialog-footer"> 
          <el-button type="primary" @click="setcolor">确 定</el-button>
        </span> 
      </el-dialog>
         
        <el-form-item label="原文链接"> 
          <el-col :span="16"> 
          <el-autocomplete 
            v-model="form.titleurl"
            class="inline-input" 
            :fetch-suggestions="querySearch" 
            placeholder="请输入原文链接" 
            @select="handleSelect" 
            value-key="name"
          ></el-autocomplete> 
          </el-col> 
        </el-form-item> 
        
        <el-form-item label="接收粉丝"> 
          <el-radio-group v-model="form.send_type"> 
            <el-radio :label="0" >全部粉丝</el-radio> 
            <el-radio :label="1">按分类选择</el-radio> 
          </el-radio-group> 
        </el-form-item> 
        
        <el-form-item label="发送时间">
          <el-col :span="16">
          <el-date-picker
            v-model="form.send_time"
            type="datetime" 
            placeholder="选择日期时间" value-format="timestamp">
          </el-date-picker> 
          <!-- <p><span>10分钟后</span><span>1小时后</span><span>2小时后</span></p> -->
          </el-col>
        </el-form-item>
        
        <el-form-item label="测试粉丝ID">
          <el-col :span="16">
          <el-input
            placeholder="null"
            v-model="fansId"
            clearable>
          </el-input>
            <p>用测试粉丝帐号点公众号菜单 "粉丝导航" > "个人中心"。</p> 
          </el-col>
          <el-col :span="4"><el-button type="primary">测试发送</el-button></el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="checkform(form)">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
        
        
      </el-form>
    </div>
	</div>
</template>
<script>
export default {
  //组件私有数据（必须是function，而且要return对象类型）
  data() {
    return {
      promote_url: "",
      index: "",
      message: "",
      selected: 0,
      popupshow: false,
      moban: [], //获取模板消息列表
      form: {
        d_id: "",
        name: "",
        template: { template_id: "", url: "", data: {} },
        send_time: "",
        send_type: 0
      },
      fansId: "", //测试发送粉丝id
      selectTemplate: {},
      colorlist: [],
      replaceimg:
        '<i class="el-icon-edit" style="color: red;" v-model="message">{{message}}</i></br>',
      tempEle: null, //当前模板选择的元素,
      linkArr: [] //原文链接数组
    };
  },
  //计算属性
  computed: {},
  //监听
  watch: {},
  //函数集，自己封装，便于开发使用
  methods: {
    //模板弹窗
    cray(e) {
      if (["cs_0", "cs_2", "cs_4", "cs_6", "cs_8","cs_10"].indexOf(e.target.id) > -1) {
        this.edit();
        this.tempEle = e.target;
      }
    },
    edit() {
      //调用弹窗
      this.popupshow = true;
    },
    //弹窗确定
    setcolor() {
      this.tempEle.innerHTML = this.message;
      this.tempEle.style.color = this.selected;
      let keyword = this.tempEle.getAttribute("keyword");
      let that = this;
      this.form.template.data[keyword].color = that.selected; //颜色
      this.form.template.data[keyword].value = that.message; //文本
      this.popupshow = false;
    },
    //选择模板
    jt(selectTemplate) {
      var div = document.getElementById("crayon");
      div.innerHTML = selectTemplate.content;
      var arr = div.children;
      for (var i = 0; i < arr.length; i++) {
        arr[i].id = "cs_" + i;
      }
      this.form.template.template_id = selectTemplate.template_id;
      this.form.template.data = {};
      for (let i in selectTemplate.template) {
        this.form.template.data[i] = { value: "", color: "" };
      }
    },

    //取消关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //检查表单选项是否为空
    checkform(form) {
      if (!form.name) {
        alert("任务名称不能为空");
      } else if (!form.template.template_id) {
        alert("选择模板不能为空");
      } else if (!form.template.url) {
        alert("原文地址不能为空");
      } else if (!form.send_time) {
        alert("发送时间不能为空");
      } else {
        this.form.d_id = JSON.parse(localStorage.userInfo).user_id;
        // this.form.send_time = this.form.send_time / 1000;
         console.log(1)
        this.axios
          .post("/cp/v1/Template/setTemplateMsg", this.form)
          .then(res => {});
      }
    },

    //原文链接
    querySearch(queryString, cb) {
      let linkArr = this.linkArr;
      let results = queryString
        ? linkArr.filter(e => {
            return e.name.indexOf(queryString) > -1;
          })
        : linkArr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      this.form.titleurl =
        "http://d" +
        JSON.parse(localStorage.userInfo).user_id +
        ".131452.com/#/setcookies/" +
        item.id;
      this.form.template.url = this.form.titleurl;
    }
    // replacecon(content) {}
    //原文链接end
  },
  created() {
    let that = this;
    that.axios
      .post("cp/v1/Template/getTemplateList", {
        d_id: JSON.parse(localStorage.userInfo).user_id
      })
      .then(res => {
        console.log(res.data.data);
        that.moban = res.data.data;
        that.moban.forEach(element => {
          element.template = {};
          element.content = element.content.replace(
            /\{\{(.*?)\.DATA\}\}/g,
            (match, p) => {
              element.template[p] = { value: "", color: "" };
              // p1 is nondigits, p2 digits, and p3 non-alphanumerics
              return (
                '<i class="el-icon-edit" style="color: red;"  keyword="' +
                p +
                '">{{' +
                p +
                "}}</i></br>"
              );
            }
          );
          // var c=  element.content.replace(/^(\>\<\\i\>)(\s+)(\<i\>)$/g,function(match,$1,$2,$3){return  $1+$3});
        });
        // that.jt1=c;
      });
  },
  //调用地址接口
  mounted() {
    let that = this;
    let uid = null;
    if (localStorage.userInfo && JSON.parse(localStorage.userInfo)) {
      uid = JSON.parse(localStorage.userInfo).user_id;
    }
    if (!uid) {
      return;
    }
    that.axios
      .post("/cp/v1/Template/getPromoteList", {
        d_id: uid
      })
      .then(res => {
        that.linkArr = res.data.data;
      });

    //模板任务列表
    // that.axios
    //   .post("http://api.ittun.com//cp/v1/Template/getTemplateMsgList", {
    //     d_id: JSON.parse(localStorage.userInfo).user_id
    //   })
    //   .then(res => {
    //   });
  }
};
</script>
<style scoped>
.form {
  width: 50%;
  margin: 0 auto;
  font-size: 16px;
  color: #666;
  padding-top: 50px;
}

.template-msg-editor {
  border: #ddd 1px solid;
  border-radius: 4px;
  padding: 8px;
  background: white;
  width: 400px;
}

.template-msg-title {
  font-weight: bold;
}

.template-msg-meta {
  color: #999;
  font-size: 12px;
}

.template-msg-main {
  margin: 10px 0 5px;
  font-size: 13px;
  line-height: 1.7em;
  vertical-align: middle;
}

.template-msg-main i {
  cursor: pointer;
  color: red;
}

.template-msg-main i {
  cursor: pointer;
  color: red;
}
.colorblack {
  color: black;
}
.colorblue {
  color: blue;
}
.colorred {
  color: red;
}
.colorpink {
  color: deeppink;
}
.colorpig {
  color: pink;
}
</style>
